<template>
  <div class="sample-card">
    <h3 class="card-title">示例卡片</h3>
    <p class="card-text">
      这段文字使用主要的文本颜色。
      <a href="#" class="card-link">这是一个链接</a>。
    </p>
    <div class="icon-container">
      <!-- 简单的 SVG 图标示例 -->
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="sample-icon">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
      </svg>
      <span>图标颜色也跟随主题色</span>
    </div>
    <button class="button-primary card-button">主题色按钮</button>
    <button class="card-button">普通按钮</button>
  </div>
</template>

<style scoped>
.sample-card {
  background-color: var(--card-bg-color);
  border: 1px solid var(--border-color);
  border-left: 5px solid var(--primary-color); /* 左侧边框使用主题色 */
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.card-title {
  color: var(--primary-color); /* 标题使用主题色 */
  margin-top: 0;
  margin-bottom: 15px;
  border-bottom: 1px dashed var(--primary-color-alpha); /* 下划线使用带透明度的主题色 */
  padding-bottom: 10px;
}

.card-text {
  color: var(--text-color-secondary);
  line-height: 1.6;
}

.card-link {
  color: var(--primary-color-dark); /* 链接使用深一点的主题色 */
  font-weight: bold;
}
.card-link:hover {
  color: var(--primary-color-light);
}

.icon-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 15px 0;
  color: var(--text-color-secondary);
}

.sample-icon {
  width: 24px;
  height: 24px;
  fill: var(--primary-color); /* SVG 填充色使用主题色 */
}

.card-button {
  margin-right: 10px;
  margin-top: 15px;
}
/* 普通按钮使用默认样式或基础变量 */
.card-button:not(.button-primary) {
   background-color: var(--bg-color);
   color: var(--text-color-primary);
   border: 1px solid var(--border-color);
}
.card-button:not(.button-primary):hover {
    background-color: var(--border-color);
}
</style>